<template>
	<view class="home-container">
		<!-- 头部 -->
		<view class="nav-bar">
			<view class="left-icon">
				<text>深圳</text>
				<i class="iconfont icon-wxbdingwei"></i>
			</view>
			<view class="enter-tabs">
				<liuyuno-tabs :tabData="tabs" :defaultIndex="defaultIndex" @tabClick='tabClick' />
			</view>
			<view class="right-icon">
				<i class="iconfont icon-search"></i>
			</view>
		</view>
<<<<<<< HEAD
		<!-- 列表 -->
		<block v-if="defaultIndex === 0">
			<scroll-view scroll-y="true" :style="{height:windowHeight +'px'}" class="scroll-warp">
				
				<view v-for="item in hotList" :key="item.id" @click="detail(item.id)">
				
					<movie :movieData="item"></movie> 
				
				</view>
				
			</scroll-view>
		</block>
		<block v-else-if="defaultIndex === 1">
			<scroll-view scroll-y="true" :style="{height:windowHeight +'px'}" class="scroll-warp">
				
				<view class="waitShown-list">
					<!-- <block v-for="(item,index) in waitShownList" :key="index"> -->
						
						<view v-for="item in waitShownList" :key="item.id" @click="detail(item.id)">
							
							<movie :movieData="item"></movie>
					
						</view>
					<!-- </block> -->
=======
		
		<!-- 热映 -->
		<block v-if="defaultIndex === 0">
			<scroll-view scroll-y="true">
				<view v-for="item in hotList" :key="item.id" class="reyin">
					<image :src="item.img" class="reyinImg"></image>
					<view class="reyinNm">
						{{item.nm}}
					</view>
					<view class="reyinTitle">
						{{item.comingTitle}}
					</view>
				</view>
			</scroll-view>
		</block>
		
		<!-- 待映 -->
		<block v-else-if="defaultIndex === 1">
			<scroll-view scroll-y="true">
				<view class="expected-warp">
					<view class="expected-title">
						近期最受期待
					</view>
					<scroll-view scroll-x="true" style="width: 100%;" class="scroll-warp">
						<view class="expectedItem" v-for="item in haopinList" :key="item.id">
							<image :src="item.img" class="exImg"></image>
							<view class="expectedNm">
								{{item.nm}}
							</view>
							<view class="expectedTime">
								{{item.comingTitle}}
							</view>
						</view>
						
					</scroll-view>
>>>>>>> be9f0f7f04b0077acf68c84b06f05daa4947f61b
				</view>
			</scroll-view>
		</block>
	</view>
</template>

<script>
	import tabs from '../../components/liuyuno-tabs/liuyuno-tabs.vue';
	import movie from '../../components/movie-list/movie.vue';
<<<<<<< HEAD

	import {
		fetchMovieList,
		fetchWaitShownList
=======
	import {
		fetchMovieList,fetchHaopin
>>>>>>> be9f0f7f04b0077acf68c84b06f05daa4947f61b
	} from '../../api/movieList.js'
	export default {
		data() {
			return {
<<<<<<< HEAD
				page: 1,
				limit: 10,
				hotList: [],
				expectedList: [],
				waitShownList: [],
				defaultIndex: 0,
				windowHeight: '',
=======
				hotList: [],
				haopinList: [],
				defaultIndex: 0,
				page: 1,
				limit: 10,
>>>>>>> be9f0f7f04b0077acf68c84b06f05daa4947f61b
				tabs: ['热映', '待映']
			}
		},
		onLoad() {
			this._getMoveList();
<<<<<<< HEAD
			this._getWaitMovie();
		},
		onReady() {
			this.getScrollHeight()
		},
		methods: {
			detail(id){
				uni.navigateTo({ url: `/pages/detail/detail?id=${id}`});
			},
			
			tabClick(index) {
				this.defaultIndex = index
			},
			
			// 热映列表
			async _getMoveList() {
				let data = await fetchMovieList()
				data.movieList.map(function(a){
					return a.img = a.img.replace('w.h/', '')
				})
				this.hotList = data.movieList
			},
			// 获取待映列表数据
			async _getWaitMovie() {
				let data = await fetchWaitShownList(1,10)
				data.coming.map(function(a){
					return a.img = a.img.replace('w.h/', '')
				})
				console.log(data)
				this.waitShownList = data.coming
			},
			// 获取滚动高度
			getScrollHeight() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.nav-bar').boundingClientRect(data => {
					uni.getSystemInfo({
						success: (res) => {
							this.windowHeight = res.windowHeight - data.height
						}
					})
				}).exec();
			}
=======
		},
		methods: {
			tabClick(index) {
				this.defaultIndex = index
			},
			async _getMoveList() {
				
				let data = await fetchMovieList(this.page, this.limit)
				data.coming.map(item => {
					item.img = item.img.replace(/\/w\.h/, '')
					return item
				})
				
				this.hotList = data.coming
				console.log(this.hotList)
			},
			
			async _getHaopin(){
				let data = await fetchMovieList(0, 20)
				data.coming.map(item => {
					item.img = item.img.replace(/\/w\.h/, '')
					return item
				})
				
				this.haopinList = data.coming
			},
			
		},
		created(){
			this._getHaopin()
>>>>>>> be9f0f7f04b0077acf68c84b06f05daa4947f61b
		},
		components: {
			tabs,
			movie
		}
	}
</script>

<style lang="scss" scoped>
	@import url("../../static/icon/maoyanIcon.css");

	.home-container {
<<<<<<< HEAD
		background-color: #f5f5f5;
		
=======
>>>>>>> be9f0f7f04b0077acf68c84b06f05daa4947f61b
		.nav-bar {
			height: 90upx;
			display: flex;
			align-items: center;
			padding: 0 20upx;
			border-bottom: solid #ececec 2upx;
<<<<<<< HEAD
			background-color: #FFFFFF;
		}

		.scroll-warp {
			background-color: #FFFFFF;
			// display: inline-block;
			// height: 100%;
			
		}

		.left-icon {
=======
		}

		.left-icon {
			
>>>>>>> be9f0f7f04b0077acf68c84b06f05daa4947f61b
			width: 120upx;
			font-size: 32upx;
			display: flex;
			align-items: center;

			.iconfont {
				margin-left: 8upx;
			}
		}

		.enter-tabs {
			flex: 1;
		}

		.right-icon {
			width: 80upx;
			text-align: center;
		}
<<<<<<< HEAD
=======
		
		.reyin{
			// display: flex;
			// flex-wrap:wrap;
			// border: 2px solid black;
			height: 80px;
			padding: 4px;
			.reyinImg{
				width: 180rpx;
				height: 180rpx;
				float: left;
			}
			.reyinNm{
				width: 50%;
				float: left;
				font-size: 14px;
				margin-left: 6px;
			}
			.reyinTitle{
				width: 50%;
				float: left;
				margin-top: 30px;
				font-size: 12px;
				color: #ccc;
				margin-left: 6px;
			}
		}
>>>>>>> be9f0f7f04b0077acf68c84b06f05daa4947f61b

		.expected-warp {
			height: 380upx;
			padding: 20upx;
<<<<<<< HEAD
			background-color: #FFFFFF;

=======
>>>>>>> be9f0f7f04b0077acf68c84b06f05daa4947f61b
			.expected-title {
				font-size: 30upx;
				margin-bottom: 20upx;
				color: #333333;
			}
<<<<<<< HEAD

			.scroll-warp {
				white-space: nowrap;
			}

			.expected-item {
				height: 310upx;
				width: 170upx;
				display: inline-block;

=======
			.scroll-warp {
				white-space: nowrap;
			}
			.expectedItem {
				height: 310upx;
				width: 170upx;
				display: inline-block;
				
>>>>>>> be9f0f7f04b0077acf68c84b06f05daa4947f61b
				.exImg {
					width: 170upx;
					height: 230upx;
				}

<<<<<<< HEAD
				.expected-nm {
=======
				.expectedNm {
>>>>>>> be9f0f7f04b0077acf68c84b06f05daa4947f61b
					width: 100%;
					font-size: 26upx;
					font-weight: 600;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

<<<<<<< HEAD
				.expected-time {
					color: #999999;
					margin-top: 8upx;
					font-size: 24upx;
				}
			}

			.expected-item:not(:first-child) {
				margin-left: 16upx;
			}
		}

		.waitShown-list {
			margin-top: 20upx;
			overflow: hidden;
			background-color: #FFFFFF;
			padding-left: 8upx;

			.waitShown-title {
				color: #333333;
				font-size:26upx;
				height: 40upx;
				line-height: 40upx;
				padding:26upx 10upx 0upx 10upx;
=======
				.expectedTime {
					color: #999999;
					margin-top: 4upx;
					font-size: 24upx;
				}
			}
			.expectedItem:not(:first-child){
				margin-left:16upx;
>>>>>>> be9f0f7f04b0077acf68c84b06f05daa4947f61b
			}
		}
	}
</style>
